<template>
    <BreadCrumb ref="breadcrumb" :item='item'></BreadCrumb>
    <!-- wrapper -->
    <div class="module-common-wrapped">
        <div class="module-common-content">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="助学金列表" name="first">
                    <div class="pane-content">
                        <div class="pane-top">
                            <div class="module-common-header">
                                <div class="search-wrapped">
                                    <el-input v-model="bursaryId" class="w-50 m-2" size="large" placeholder="输入编号进行搜索"
                                        :prefix-icon="Search" @change="searchBursary()" clearable
                                        @clear="getBursaryFirstPageList" />
                                </div>
                                <div class="button-wrapped">
                                    <el-button type="primary" @click="getBursaryFirstPageList">刷新列表</el-button>
                                </div>
                            </div>
                            <!-- 表格部分 -->
                            <div class="module-common-table">
                                <el-table :data="tableData" border style="width: 100%">
                                    <el-table-column type="index" width="50"></el-table-column>
                                    <el-table-column prop="id" label="编号" width="200" />
                                    <el-table-column prop="student_id" label="学号" width="160" />
                                    <el-table-column prop="student_name" label="姓名" width="100" />
                                    <el-table-column prop="department" label="部门" width="100" />
                                    <el-table-column prop="major" label="专业" width="100" />
                                    <el-table-column prop="grade" label="年级" width="150" />
                                    <el-table-column prop="student_type" label="学生类型" width="100" />
                                    <el-table-column prop="bursary_level" label="申请类型" width="100" />
                                    <el-table-column prop="family_income" label="家庭收入" width="150" />
                                    <el-table-column prop="status" label="审核状态" width="200">
                                        <template #default="{ row }">
                                            <el-tag class="ml-2" type="primary" v-if="row.status == 0">未审核</el-tag>
                                            <el-tag class="ml-2" type="success"
                                                v-else-if="row.status == 1">小组审核通过</el-tag>
                                            <el-tag class="ml-2" type="danger"
                                                v-else-if="row.status == -1">小组审核未通过</el-tag>
                                            <el-tag class="ml-2" type="success"
                                                v-else-if="row.status == 2">辅导员审核通过</el-tag>
                                            <el-tag class="ml-2" type="danger"
                                                v-else-if="row.status == -2">辅导员审核未通过</el-tag>
                                            <el-tag class="ml-2" type="success"
                                                v-else-if="row.status == 3">院领导审核通过</el-tag>
                                            <el-tag class="ml-2" type="danger"
                                                v-else-if="row.status == -3">院领导审核未通过</el-tag>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="student_name" label="发起人" width="100" />
                                    <el-table-column prop="create_time" label="发起时间" width="200">
                                        <template #default="{ row }">
                                            <div>{{ row.create_time?.slice(0, 10) }}</div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="update_time" label="最后修改时间" width="200">
                                        <template #default="{ row }">
                                            <div>{{ row.update_time?.slice(0, 10) }}</div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="操作" width="180" fixed="right">
                                        <template #default="{ row }">
                                            <div>
                                                <el-button type="primary" @click="auditBursary(row)"
                                                    :disabled="row.status == 3">审核</el-button>
                                                <el-button type="success" @click="checkBursary(row)">查看</el-button>
                                            </div>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>
                        <div class="table-footer">
                            <el-pagination :page-size="paginationData.bursaryPageSize"
                                :current-page="paginationData.bursarytCurrentPage" :pager-count="7"
                                :total="paginationData.bursaryTotal" :page-count="paginationData.bursarytPageCount"
                                @current-change="BursaryCurrentChange" layout="prev, pager, next" />
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="奖学金列表" name="second">
                    <div class="pane-content">
                        <div class="pane-top">
                            <div class="module-common-header">
                                <div class="search-wrapped">
                                    <el-input v-model="scholarshipId" class="w-50 m-2" size="large" clearable
                                        placeholder="输入编号进行搜索" :prefix-icon="Search" @change="searchApplyProduct()"
                                        @clear="getScholarFirstPageList" />
                                </div>
                                <div class="button-wrapped">
                                </div>
                            </div>
                            <!-- 表格部分 -->
                            <div class="module-common-table">
                                <el-table :data="scholarshipTableData" border style="width: 100%">
                                    <el-table-column type="index" width="50"></el-table-column>
                                    <el-table-column prop="id" label="编号" width="200" />
                                    <el-table-column prop="student_name" label="学生" width="150" />
                                    <el-table-column prop="department" label="院系" width="200" />
                                    <el-table-column prop="major" label="专业" width="150" />
                                    <el-table-column prop="grade" label="年级" width="100" />
                                    <el-table-column prop="scholarship_level" label="奖学金等级" width="180" />
                                    <el-table-column prop="create_time" label="申请时间" width="180">
                                        <template #default="{ row }">
                                            <div>{{ row.create_time?.slice(0, 10) }}</div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="update_time" label="更新时间" width="180">
                                        <template #default="{ row }">
                                            <div>{{ row.update_time?.slice(0, 10) }}</div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="status" label="审核状态" width="200">
                                        <template #default="{ row }">
                                            <el-tag class="ml-2" type="primary" v-if="row.status == 0">未审核</el-tag>
                                            <el-tag class="ml-2" type="success"
                                                v-else-if="row.status == 1">小组审核通过</el-tag>
                                            <el-tag class="ml-2" type="danger"
                                                v-else-if="row.status == -1">小组审核未通过</el-tag>
                                            <el-tag class="ml-2" type="success"
                                                v-else-if="row.status == 2">辅导员审核通过</el-tag>
                                            <el-tag class="ml-2" type="danger"
                                                v-else-if="row.status == -2">辅导员审核未通过</el-tag>
                                            <el-tag class="ml-2" type="success"
                                                v-else-if="row.status == 3">院领导审核通过</el-tag>
                                            <el-tag class="ml-2" type="danger"
                                                v-else-if="row.status == -3">院领导审核未通过</el-tag>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="操作" width="180" fixed="right">
                                        <template #default="{ row }">
                                            <div>
                                                <el-button type="primary" @click="auditScholar(row)"
                                                    :disabled="row.status == 3">审核</el-button>
                                                <el-button type="success" @click="checkScholar(row)">查看</el-button>
                                            </div>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>
                        <div class="table-footer">
                            <el-pagination :page-size="paginationData.scholarshipPageSize"
                                :current-page="paginationData.scholarshipCurrentPage" :pager-count="7"
                                :total="paginationData.scholarshipTotal" :page-count="paginationData.scholarshipCount"
                                @current-change="scholarshipCurrentChange" layout="prev, pager, next" />
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
    <audit ref="AuditB" @success="BursaryCurrentChange(paginationData.bursarytCurrentPage)"></audit>
    <audit ref="AuditS" @success="scholarshipCurrentChange(paginationData.scholarshipCurrentPage)"></audit>
    <checkInfo ref="CheckInfoB"></checkInfo>
    <checkInfo ref="CheckInfoS"></checkInfo>
</template>

<script lang='ts' setup>
import { ref, reactive, } from 'vue'
import BreadCrumb from '@/components/breadCrumb.vue'
import { bus } from "@/utils/mitt.js"
import { Search } from '@element-plus/icons-vue'
import type { TabsPaneContext } from 'element-plus'
import { getScholarshipByPage, getBursaryByPage, getBursaryById, getScholarById } from '@/api/apply.js'
import audit from '../component/audit.vue'
import checkInfo from '../component/checkInfo.vue'

// 面包屑
const breadcrumb = ref()
// 面包屑参数
const item = ref({
    first: '流程管理',
    second: '审核小组审核'
})
const handleClick = (tab: TabsPaneContext) => {
    if (tab.props.label == '助学金列表') {
        getBursaryFirstPageList()
    }
    if (tab.props.label == '奖学金列表') {
        getScholarFirstPageList()
    }
}

const activeName = ref('first')

//助学金搜索编号
const bursaryId = ref<number>()
//奖学金搜索编号
const scholarshipId = ref<number>()
// 助学金表格
const tableData = ref([])
// 奖学金表格
const scholarshipTableData = ref([])

// 分页数据
const paginationData = reactive({
    // 助学金总数
    bursaryTotal: null,
    // 助学金列表总页数
    bursarytPageCount: null,
    // 助学金列表当前所处页数
    bursarytCurrentPage: 1,
    // 助学金每页的数量
    bursaryPageSize: 10,
    // 奖学金列表总条数
    scholarshipTotal: null,
    // 奖学金列表总页数
    scholarshipCount: null,
    // 奖学金列表当前所处页数
    scholarshipCurrentPage: 1,
    // 奖学金每页的数量
    scholarshipPageSize: 10,
})


// 获取助学金列表的页数
const getBursaryListLength = async () => {
    const res = await getBursaryByPage(1)
    paginationData.bursaryTotal = res.data.total
    paginationData.bursarytPageCount = Math.ceil(res.data.total / paginationData.bursaryPageSize)
}
getBursaryListLength()
// 获取奖学金列表的页数
const getScholarshipListLength = async () => {
    const res = await getScholarshipByPage(1)
    paginationData.scholarshipTotal = res.data.total
    paginationData.scholarshipCount = Math.ceil(res.data.total / paginationData.scholarshipPageSize)
}
getScholarshipListLength()
// 默认获取助学金第一页的数据
const getBursaryFirstPageList = async () => {
    const res = await getBursaryByPage(1)
    tableData.value = res.data.data
    paginationData.bursarytCurrentPage = 1
}
getBursaryFirstPageList()
// 默认获取奖学金列表第一页的数据
const getScholarFirstPageList = async () => {
    const res = await getScholarshipByPage(1)
    scholarshipTableData.value = res.data.data
    paginationData.scholarshipCurrentPage = 1
}
getScholarFirstPageList()

// 助学金列表监听换页
const BursaryCurrentChange = async (value: number) => {
    paginationData.bursarytCurrentPage = value
    const res = await getBursaryByPage(value)
    tableData.value = res.data.data
}

// 奖学金列表监听换页
const scholarshipCurrentChange = async (value: number) => {
    paginationData.scholarshipCurrentPage = value
    const res = await getScholarshipByPage(value)
    scholarshipTableData.value = res.data.data
}

// 通过助学金ID去搜索
const searchBursary = async () => {
    const res = await getBursaryById(bursaryId.value)
    tableData.value = res.data.data
}
// 通过奖学金ID去搜索
const searchApplyProduct = async () => {
    const res = await getScholarById(scholarshipId.value)
    scholarshipTableData.value = res.data.data
}

// 打开审核助学金窗口
const AuditB = ref()
const auditBursary = (row) => {
    AuditB.value.open()
    bus.emit('bursaryInfo', row)
}
// 打开审核奖学金窗口
const AuditS = ref()
const auditScholar = (row) => {
    AuditS.value.open()
    bus.emit('scholarshipInfo', row)
}

// 查看申请助学金详情
const CheckInfoB = ref()
const checkBursary = (row: any) => {
    CheckInfoB.value.open()
    bus.emit('checkInfoIdB', row)
}
// 查看申请奖学金详情
const CheckInfoS = ref()
const checkScholar = (row: any) => {
    CheckInfoS.value.open()
    bus.emit('checkInfoIdS', row)
}

</script>

<style lang="scss" scoped>
:deep(.el-table .cell) {
    font-weight: 400;
}
</style>